<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-08-29 15:34:18
 * @LastEditTime: 2023-12-05 16:48:19
-->
<template>
    <el-checkbox-group v-model="checkList" style="display: flex;flex-wrap: wrap;">
        <el-checkbox v-for="item in dataList" v-bind:key="item" :label="item.dictName" :class="isHit ? 'pd3' : ''" />
    </el-checkbox-group>
    <div v-if="isHit" class="pd3">{{ hits }}</div>
</template>
  
<script>

export default {
    name: 'CommonRadioKey',
    emits: ['returnData', 'clearData', 'mustCount'],
    components: {
    },
    props: {
        dataList: {
            default: []
        },
        isMust: {
            default: false,
            type: Boolean
        },
        mustHit: {
            default: '',
            type: String
        },
        isValue: {
            default: false,
        },
        insertKey: String,
        default: {
            default: []
        }
    },
    data() {
        return {
            checkList: this.default,
            hits: this.hit,
            isHit: false
        }
    },
    mounted() {
    },
    methods: {
        inputReturn() {
            let flag = true
            if (this.isMust && this.checkList.length == 0) {
                this.hits = this.mustHit
                this.isHit = true
                flag = false
            }
            return flag
        }
    },
    watch: {
        checkList: {
            handler() {
                if (this.isValue) {

                    if (this.checkList.length > 0) {
                        this.isHit = false
                    }
                    const temp = {
                        [this.insertKey]: this.checkList.map(name => {
                            const item = this.dataList.find(item => item.dictName === name);
                            return item.dictValue;
                        }).join(",")
                    }
                    return this.$emit('returnData', temp)

                } else {
                    if (this.checkList.length > 0) {
                        this.isHit = false
                    }
                    let temp = { [this.insertKey]: this.checkList.join(",") }
                    return this.$emit('returnData', temp)
                }
            }
        }
    },
    computed: {
    }

}
</script>
    
<style scoped>
::v-deep(.el-checkbox__inner) {
    z-index: 0;
}

.pd3 {
    color: red;
    font-size: 13px;
}
</style>